import React, { useState } from 'react';
import { LazyLoad } from 'web-component';

export default () => {
  const [visible, setVisible] = useState(false);
  return (
    <div
      style={{
        width: '100vw',
        height: '200vh',
        fontSize: 16,
      }}
    >
      往上滑动, 当滑动到方块一半时显示露出
      <LazyLoad threshold={0.5} onVisible={(visible) => setVisible(visible)}>
        <div
          style={{
            marginTop: '120vh',
            backgroundColor: 'red',
            height: 150,
            width: 375,
          }}
        >
          我是一个方块
        </div>
      </LazyLoad>
      <div
        style={{
          position: 'fixed',
          top: '50%',
          right: 0,
          width: 50,
          height: 20,
          backgroundColor: 'blue',
          color: 'white',
        }}
      >
        {visible ? '已露出' : '未露出'}
      </div>
    </div>
  );
};
